<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    #container {
      width: 300px;
      height: 300px;
      border: 3px dotted red;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    function handleDropover(event) {
      event.stopPropagation();
      event.preventDefault();
    }

    function handleDrop(event) {
      event.stopPropagation();
      event.preventDefault();
      /***** 访问拖拽文件 *****/
      const files = event.dataTransfer.files;
      console.log(files);
      /**********/
    }

    const target = document.querySelector("#container");
    target.addEventListener("dragover", handleDropover);
    target.addEventListener("drop", handleDrop);
  </script>
</body>

</html>